<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{app.name}">企业云盘项目</title>
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/assets/css/font-awesome.min.css}" rel="stylesheet"/>
    <script th:src="@{/assets/js/jquery-1.6.2.min.js}"></script>

    <script th:inline="javascript">
        function openChangePasswordDialog() {
            try {
                $("#change-password-dialog-id").dialog("open");
            } catch (e) {
                console.error("打开弹窗失败:", e);
                alert("修改密码功能暂不可用，请联系管理员");
            }
        }
        $(function () {
            // 导航条缩放功能
            $("#toggleNavBtn").click(function() {
                // 切换logo显示状态
                $("header > img").toggle();
                // 切换语言选择导航显示状态
                $("header > nav.language-nav").toggle();
                // 切换按钮图标
                $(this).find("i").toggleClass("fa-compress fa-expand");
            });

            // 用户信息下拉菜单
            $("#userInfoBtn").click(function(e) {
                e.stopPropagation();
                $("#userMenu").toggleClass("hidden");
            });

            $(document).click(function() {
                $("#userMenu").addClass("hidden");
            });

            // 导航栏缩放功能
            let isShrinked = false;
            $("#shrink-btn").click(function() {
                isShrinked = !isShrinked;
                if (isShrinked) {
                    // 隐藏logo和语言切换
                    $(".header-logo").hide();
                    $(".lang-switch").hide();
                    // 调整个人信息位置
                    $("#gd-user-info-id").css("right", "20px");
                    $(this).html('<i class="glyphicon glyphicon-expand"></i>');
                } else {
                    // 显示logo和语言切换
                    $(".header-logo").show();
                    $(".lang-switch").show();
                    // 恢复个人信息位置
                    $("#gd-user-info-id").css("right", "90px");
                    $(this).html('<i class="glyphicon glyphicon-compress"></i>');
                }
            });


            $("#gd-user-btn-id").click(function (event) {
                event.stopPropagation()
                $("#gd-user-info-id > ul").removeClass("hidden")
            })

            $("body").click(function () {
                $("#gd-user-info-id > ul").addClass("hidden")
            })

            $("ul#gd-sys-memu-id > li").click(function () {
                $("ul#gd-sys-memu-id > li").removeClass('active')
                $(this).addClass('active')
                $(".service-menu").removeClass('in')
                var forid = $(this).attr("forid")
                $("#" + forid).addClass("in")
            })

            $("ul#gd-sys-memu-id > li:first").click()

            $("ul.menu-level3 > li").click(function () {
                $("ul.menu-level3 > li").removeClass("focus")
                $(this).addClass("focus")
            })


           //修改密码
            // 确保jQuery UI dialog可用
            if(typeof $.fn.dialog !== 'undefined') {
                $("#change-password-dialog-id").dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    title: /*[[#{main.passwd.modify}]]*/'修改密码',
                    buttons: [
                        {
                            text: /*[[#{common.confirm}]]*/'确认',
                            click: function() {
                                var flag = $("form#change-password-form-id input.form-control").checkDom();
                                if(!flag) return;

                                if($("input[name='newPassword']").val() !== $("input[name='confirmPassword']").val()) {
                                    message(/*[[#{user.password.not.match}]]*/'新密码与确认密码不一致');
                                    return;
                                }

                                $("#change-password-form-id").submit();
                            }
                        },
                        {
                            text: /*[[#{common.cancel}]]*/'取消',
                            click: function() {
                                $(this).dialog("close");
                                $("#change-password-form-id").resetForm();
                            }
                        }
                    ]
                });

                // 表单提交处理
                $("#change-password-form-id").ajaxForm({
                    dataType: "json",
                    success: function(data) {
                        message(data.msg);
                        if(data.success) {
                            $("#change-password-dialog-id").dialog("close");
                            $("#change-password-form-id").resetForm();
                        }
                    },
                    error: function() {
                        message(/*[[#{common.error}]]*/'操作失败');
                    }
                });
            } else {
                console.warn("jQuery UI dialog插件未加载");
            }

        })//ready function


    </script>
    <style>
        body{
            display: flex;
            flex-direction: column;

        }

        body > header {
            display: flex;
            width: 100%;
            justify-content:space-between;
            padding: 10px;
            align-items: center;
            height: 100px;
        }

        .toggle-btn {
            background: transparent;
            border: none;
            font-size: 18px;
            cursor: pointer;
            margin-right: 15px;
            color: #333;
        }

        body > header > img{
            height: 80px
        }

        body > header > nav{
            width: 150px;
            display: flex;
            justify-content: space-between;
            padding-right: 20px;
        }

        .language-nav {
            margin-right: auto;
        }

        body > section{
            width: 100%;
            flex-grow: 1;
            display: flex;

        }

        body > section > nav{
            flex-basis: 130px;
            height: 100%;
        }

        body > section > iframe{
            flex-grow: 1;
            height: 100%;
            border-width: 0;
        }

        #gd-user-info-id{
            position: absolute;
            top: 33px;
            right: 90px;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        .menu-level3 > li{
            margin-left: 13px;
        }

        .fade {
            display: none;
        }

        .fade.in{
            display:block;
        }

        ul.menu-level3 > li.focus{
            background-color: #dfd;
        }

    </style>
</head>
<body>

<header>
    <!-- 缩放按钮 -->
    <button id="toggleNavBtn" class="toggle-btn">
        <i class="fa fa-compress"></i>
    </button>

    <img th:if="${session.lang} eq 'en'" th:src="@{/assets/images/logo_en.png}">
    <img th:unless="${session.lang} eq 'en'" th:src="@{/assets/images/logo_zh.png}">

    <nav class="language-nav">

        <a  th:href="@{/(lang=en)}" th:text="#{login.english}"></a>
        <a  th:href="@{/(lang=zh)}" th:text="#{login.chinese}"></a>
    </nav>

    <nav></nav>

    <nav id="gd-user-info-id">
        <a id='gd-user-btn-id' href="#" class="btn">
            <i class="glyphicon glyphicon-user"></i>
            <span th:unless="${session.lang} eq 'en'" sec:authentication="principal.niceName"></span>
            <span th:if="${session.lang} eq 'en'" sec:authentication="principal.username"></span>
        </a>

        <ul class="nav navbar-btn hidden">
            <li>
                <a href="#">
                    <i class="glyphicon glyphicon-king"></i>
                    <span th:text="#{main.user.modify}"></span>
                </a>
            </li>
            <li>
                <a href="#" onclick="openChangePasswordDialog()">
                    <i class="glyphicon glyphicon-phone"></i>
                    <span th:text="#{main.passwd.modify}"></span>
                </a>
            </li>
            <li>
                <a th:href="@{/logout}">
                    <i class="glyphicon glyphicon-off"></i>
                    <span th:text="#{main.user.logout}"></span>
                </a>
            </li>
        </ul>
    </nav>
</header>

<ul id="gd-sys-memu-id" class="nav nav-tabs">
    <li th:each="item:${session.menuList}" th:forid="${'service-menu-' + item.menuId}">
        <a href="#">
            <i th:class="${item.menuIcon}"></i>
            <span th:text="${item.menuName}"></span>
        </a>
    </li>
</ul>

<section>
    <nav>
        <ul  class="service-menu nav navbar-btn tab-pane fade" th:each="menu1 :${session.menuList}" th:id="${'service-menu-' + menu1.menuId}">
            <li th:each="menu2:${menu1.child} ">
                <a href="#">
                    <i th:class="${menu2.menuIcon}"></i>
                    <span th:text="${menu2.menuName}"></span>
                </a>
                <ul class="nav navbar-btn menu-level3">
                    <li th:each="menu3:${menu2.child} ">
                        <a th:href="${menu3.getMenuUrl()}" target="contents">
                            <i th:class="${menu3.menuIcon}"></i>
                            <span th:text="${menu3.menuName}"></span>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>

    </nav>
    <iframe name="contents" th:src="@{/welcomePage}"></iframe>
</section>

<!-- 主内容区域 -->
<main style="padding: 20px;">
    <!-- 页面内容 -->
</main>


<!-- ===== 修改密码弹窗开始 ===== -->
<div id="change-password-dialog-id" style="display: none;">
    <form id="change-password-form-id" method="post" th:action="@{/user/changePassword}">
        <div class="form-group">
            <span th:text="#{login.user.password}"></span>
            <input class="form-control" name="oldPassword" type="password"
                   th:placeholder="#{login.password.plch}"
                   pattern="^.{6,}$" required>
        </div>

        <div class="form-group">
            <span th:text="#{user.new.password}"></span>
            <input class="form-control" name="newPassword" type="password"
                   th:placeholder="#{user.new.password.plch}"
                   pattern="^.{6,}$" required>
        </div>

        <div class="form-group">
            <span th:text="#{user.confirm.password}"></span>
            <input class="form-control" name="confirmPassword" type="password"
                   th:placeholder="#{user.confirm.password.plch}"
                   pattern="^.{6,}$" required>
        </div>
    </form>
</div>

</body>
</html>